.box {
  width: 750px;
  margin: 0 auto;
  .container {
    background-color: #8a489c;

    // 是否换行 nowrap 不换行 ，放不下就等比例缩小填充 ，默认值
    // flex-wrap: nowrap;
    // 是否换行 wrap 换行,第一行在上
    // flex-wrap: wrap;
    // 是否换行 wrap 换行,第一行在下
    // flex-wrap: wrap-reverse;

    height: 500px;

    //  flex-direction和flex-wrap的复合写法
    flex-flow: row nowrap;

    width: 100%;
    // item在主轴上的对齐方式 flex-start 从主轴的起始位置开始排列子元素 默认值
    // justify-content: flex-start; //  start left
    // item在主轴上的对齐方式 flex-end 主轴的结束位置开始排列子元素
    // justify-content: flex-end; // right end
    // 居中 center
    // justify-content: center;
    // 两端对齐，项目之间的间距相等
    // justify-content: space-between;
    // 两端之外的距离相等，项目间的间距是两端的2倍
    justify-content: space-around;

    display: flex;
    // 交叉轴上的对齐方式 stretch拉伸填满 默认值，在子项目没有设置高度时起作用
    // align-items: stretch;
    // 交叉轴上的对齐方式 以第一行文本为基准对齐
    align-items: center;
    // center flex-start flex-end

    color: #fff;
    // 容器的主轴方向 row 水平从左到右布局 默认值
    // flex-direction: row;
    // 容器的主轴方向 row-reverse 水平从右到左布局
    // flex-direction: row-reverse;
    // 容器的主轴方向 column 垂直从上到下布局
    // flex-direction: column;
    // 容器的主轴方向 column-reverse 垂直从下到上布局
    // flex-direction: column-reverse;

    .item {
      background-color: #e68125;
      width: 50px;
      border: 1px solid #fff;
      &:nth-of-type(1) {
        height: 50px;
      }
      &:nth-of-type(2) {
        height: 150px;
      }
      &:nth-of-type(3) {
        height: 100px;
      }
      &:nth-of-type(4) {
        height: 200px;
      }
      &:nth-of-type(5) {
        height: 150px;
      }
    }
  }
}
/*
  容器(container)的属性
  flex-direction:主轴方向
  flex-wrap:是否换行
  flex-flow:flex-direction和flex-wrap复合写法
  justify-content:主轴方向上项目的对齐方式
  align-items:项目在交叉轴上的对齐方式
  align-content:多个主轴时，项目的在交叉轴上的对齐方式
  display:flex;
*/
/*
  项目(item)的属性
  flex-grow:子元素是否放大。默认值0
  flex-shrink:子元素是否缩小.默认值1
  flex-basis:指定子元素的宽度，会覆盖width属性，默认值auto默认使用元素初始宽度
  flex:前三个属性的复合写法，默认值 0 1 auto; none:0 0 auto; auto: 1 1 auto; 1:1 1 0%; 2:2 1 0%;
  order:子元素的顺序，越小越靠前，参考数组的下标取值方法
  align-self:子元素覆盖父级元素的align-items的样式
*/
